/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-16 17:54:51
 * @LastEditTime: 2023-04-11 14:00:29
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Box, Center, Flex, Icon, Image, Text } from '@chakra-ui/react';
import { setSelectedArtisticEffect } from 'features/parameters/store/presetSlice';
import { useMemo } from 'react';
import { MdCheckCircle } from 'react-icons/md';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
export interface ArtisticEffect {
  id: string;
  name: string;
  imgUrl?: string;
  desc?: string;
  [k: string]: any;
}

export const ArtisticEffectItem = (props: ArtisticEffect) => {
  const { name, imgUrl, id } = props;
  const url = imgUrl?.startsWith('http')
    ? imgUrl
    : `${import.meta.env.VITE_APP_FILE_URL}${imgUrl}`;
  const { selectedArtisticEffect } = useAppSelector((store) => store.preset);
  const dispatch = useAppDispatch();
  const selected = useMemo(
    () => selectedArtisticEffect.indexOf(id) >= 0,
    [selectedArtisticEffect, id]
  );
  const handleSelect = () => {
    const _selected = [...selectedArtisticEffect];
    if (selected) {
      const index = _selected.indexOf(id);
      _selected.splice(index, 1);
    } else {
      _selected.push(id);
    }
    dispatch(setSelectedArtisticEffect(_selected));
  };

  return (
    <Flex flexDirection="column" gap="1">
      <Box
        w="8rem"
        rounded="md"
        h="8rem"
        onClick={handleSelect}
        border="3px solid"
        borderColor={selected ? 'base.50' : 'base.850'}
        _light={{
          borderColor: selected ? 'accent.700' : 'base.850',
        }}
        bg="base.950"
        cursor="pointer"
        textAlign="center"
        position="relative"
      >
        <Center top={1} right={1} position="absolute">
          {selected && (
            <Icon
              borderRadius="full"
              color="base.50"
              _light={{
                color: 'accent.700',
              }}
              as={MdCheckCircle}
              fontSize="1.5rem"
            />
          )}
        </Center>
        {imgUrl && (
          <Image
            maxH="100%"
            w="100%"
            objectFit="cover"
            borderRadius="base"
            src={url}
            loading="lazy"
          />
        )}
      </Box>
      <Text
        textAlign="center"
        fontWeight={selected ? 600 : 400}
        color={selected ? 'accent.500' : 'base.300'}
      >
        {name}
      </Text>
    </Flex>
  );
};
export default ArtisticEffectItem;
